{% extends "背景板.html" %}

{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}

{% block main %}
<style>
  /* 样式表 */
  table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
  }

  th,
  td {
    text-align: left;
    padding: 8px;
    border: 1px solid #ddd;
  }

  th {
    background-color: #f2f2f2;
  }

  .manage-button,
  .delete-button {
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 4px;
  }

  .manage-button {
    background-color: #00bfff;
  }

  .delete-button {
    background-color: #ffb6c1;
  }

  .buttons {
    display: inline-flex;
  }

  /* 模态框样式 */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }

  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
  }

  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
        .save-button {
      background-color: #1E90FF;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .cancel-button {
      background-color: #FFB6C1;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

</style>
<div class="member-info">
    <!-- 新增会员 -->
    <button onclick="openModal('add-modal')">添加商品</button>
    <!-- 添加会员模态框 -->
    <div class="modal" id="add-modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('add-modal')">×</span>
            <h2>添加商品</h2>
            <form action="{{ url_for('sale.shoppingcart') }}" method="POST">
                <input  type="hidden" id="sales_order_id" name="sales_order_id" value="{{ sales_order_id }}">
                <label for="product_id">商品编码</label>
                <input id="product_id" name="product_id" required type="text">
                <div></div>
                <label for="quantity">商品数量</label>
                <input id="quantity" name="quantity" required type="text">
                <div></div>
                <input type="submit" value="保存">
            </form>
        </div>
    </div>
</div>
<div class="cart-info">
    <h1>购物车管理 订单编号{{sales_order_id}}</h1>
    <form action="{{ url_for('sale.update_salesorder_memberphone') }}" method="POST">
        <input type="hidden" name="sales_order_id" value="{{ sales_order_id }}">
        <label for="member-phone">会员手机号：</label>
        <input type="text" id="member-phone" name="member_phone" placeholder="请输入会员手机号" value="{{member_phone}}">
        <button type="submit">保存</button>
    </form>
</div>
    <!-- 购物车列表 -->
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>供应商</th>
                <th>数量</th>
                <th>商品总金额</th>
                <th>操作</th>
            </tr>
            {% for item in cart_items %}
                <tr>
                    <td>{{ item.product.name }}</td>
                    <td>{{ item.product.price }}</td>
                    <td>{{ item.product.supplier }}</td>
                    <td>{{ item.sales_quantity }}</td>
                    <td>{{ item.amount }}</td>
                    <td>
                        <div class="buttons">
                            <button class="manage-button" onclick="openModal('manage-modal-{{ item.id }}')">管理</button>
                            <button class="delete-button" onclick="openModal('delete-modal-{{ item.id }}')">删除</button>
                        </div>
                    </td>
                </tr>
                <!-- 管理模态框 -->
                <div class="modal" id="manage-modal-{{ item.id }}">
                    <div class="modal-content">
                        <span class="close" onclick="closeModal('manage-modal-{{ item.id }}')">×</span>
                        <h2>管理购物车商品</h2>
                        <form action="{{ url_for('sale.shoppingcart_manage') }}" method="POST">
                            <input type="hidden"  name="sales_order_id" value="{{ sales_order_id }}">
                            <input type="hidden"  name="item_id" value="{{ item.id }}">
                            <label for="new_quantity">数量</label>
                            <input id="new_quantity" name="new_quantity" required type="number" min="1" value="{{ item.sales_quantity }}">
                            <input type="submit" value="保存">
                        </form>
                    </div>
                </div>
                <!-- 删除模态框 -->
                <div class="modal" id="delete-modal-{{ item.id }}">
                    <div class="modal-content">
                        <span class="close" onclick="closeModal('delete-modal-{{ item.id }}')">×</span>
                        <h2>确认删除购物车商品</h2>
                        <p>你确定要删除 "{{ item.product.name }}" 吗？</p>
                        <form action="{{ url_for('sale.shoppingcart_delete') }}" method="POST">
                            <input type="hidden"  name="sales_order_id" value="{{ sales_order_id }}">
                            <input type="hidden"  name="item_id" value="{{ item.id }}">
                            <div class="buttons">
                                <input type="submit" value="确认删除">
                                <button onclick="closeModal('delete-modal-{{ item.id }}')" type="button">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            {% endfor %}
        </table>
<div>总金额：{{total_amount}}</div>
    <button class="save-button" onclick="savePurchaseOrder()">保存</button>
    <button class="cancel-button" onclick="cancelPurchaseOrder()">取消</button>
</div>
<script>
  // 显示模态框
  function openModal(modalId) {
    document.getElementById(modalId).style.display = "block";
  }

  // 隐藏模态框
  function closeModal(modalId) {
    document.getElementById(modalId).style.display = "none";
  }

  function savePurchaseOrder() {
      window.location.href = "/sale/shopping_cart/save/{{sales_order_id}}";
    }

    function cancelPurchaseOrder() {
      window.location.href =  "/sale";
    }
</script>
{% endblock %}